import React, { ReactNode, MouseEventHandler } from "react";
// import styled from 'styled-components';
import classNames from "classnames";
import styles from "./button.module.scss";

export type ButtonProps = {
  children?: ReactNode;
  primary?: boolean;
  disabled?: boolean;
  size?: "small" | "medium" | "large";
  onClick?: MouseEventHandler<HTMLButtonElement>;
};

// const StyledButton = styled.button<ButtonProps>`
//   border: 0;
//   line-height: 1;
//   font-size: 15px;
//   cursor: pointer;
//   font-weight: 700;
//   font-weight: bold;
//   border-radius: 10px;
//   display: inline-block;
//   color: ${(props) => (props.primary ? "#fff" : "#000")};
//   background-color: ${(props) => (props.primary ? "#FF5655" : "#f4c4c4")};
//   padding: ${(props) =>
//     props.size === "small"
//       ? "7px 25px 8px"
//       : props.size === "medium"
//       ? "9px 30px 11px"
//       : "14px 30px 16px"};
// `;

const Button: React.FC<ButtonProps> = (props) => {
  const { children, primary } = props;
  // return (
  //   <StyledButton
  //     type="button"
  //     {...props}
  //   >
  //     {children}
  //   </StyledButton>
  // )
  return (
    <button
      className={classNames(
        styles[`mg-button`],
        primary ? styles["mg-button__primary"] : styles["mg-button__secondary"],
      )}
    >
      {children}
    </button>
  );
};

export default Button;
